<template>
    <div>
        <el-form ref="form" :model="form" label-width="80px" v-show="show">
            <el-form-item label="开户行:">
                <el-input v-model="form.bankName" style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item label="开户账号:">
                <el-input v-model="form.bankCradNo" style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item label="公司名称:">
                <el-input v-model="form.bankCradUserName" style="width: 400px;"></el-input>
            </el-form-item>
             <el-form-item>
                <el-button type="primary" @click="setUp" class="btn" v-show="showCard">设置银行卡</el-button>
                <el-button type="primary" @click="modify" class="btn" v-show="!showCard">修改银行卡</el-button>
            </el-form-item>
        </el-form>
        <el-form ref="form" :model="form" label-width="80px" v-show="!show">
            <el-form-item label="开户行:">
                <span>{{form.bankName}}</span>
            </el-form-item>
            <el-form-item label="开户账号:">
                <span>{{form.bankCradNo}}</span>
            </el-form-item>
            <el-form-item label="公司名称:">
               <span>{{form.bankCradUserName}}</span>
            </el-form-item>
             <el-form-item>
                <!-- <el-button type="primary" @click="onSubmit" class="btn" v-show="show">设置银行卡</el-button> -->
                <el-button type="primary" @click="onSubmit" class="btn" v-show="!show">修改银行卡</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
  data() {
    return {
        form:{
            bankName: null,
            bankCradNo: null,
            bankCradUserName: null
        },
        show: true,
        showCard: true
    }
  },
  created() {
    this.getBankCrad()
  },
  methods: {
    onSubmit(){
        this.show = true
        this.showCard = false
    },
    setUp(){
        var that = this
        console.log(that.form)
        that.$post({
            api: "/account/addBankCradInfo",
            data: {
                userId: JSON.parse(localStorage.getItem("userInfo")).userId,
            // userId: JSON.parse(localStorage.getItem("userInfo")).userId,
               ...that.form 
            }
        }).then(({ data }) => {
            if(data.code === 0){
                this.show = false
                this.showCard = true
                that.getBankCrad()
                that.$notify({
                    title: '成功',
                    message: '设置成功',
                    type: 'success',
                    duration: 2000
                })
            }
            console.log("addBankCradInfo",data)
        });
    },
    modify(){
     var that = this
      that.$post({
            api: "/account/updateBankCradInfo",
            data: {
                userId: JSON.parse(localStorage.getItem("userInfo")).userId,
            // userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                ...that.form 
            }
        }).then(({ data }) => {
        if(data.code === 0){
             this.show = false
             this.showCard = true
            that.getBankCrad()
            that.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success',
                duration: 2000
            })
        }
        console.log("getBankCradInfo",data)
        });
    },
    getBankCrad(){
      var that = this
      that.$post({
            api: "/account/getBankCradInfo",
            data: {
                userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                // userId: JSON.parse(localStorage.getItem("userInfo")).userId,
            }
        }).then(({ data }) => {
        if(data.code === 0){
            if(data.data != null){
                that.show = false
                that.form = data.data
            }
            
            
        }
        console.log("getBankCradInfo",data)
        });
    },
  }
}
</script>